<template>
  <div id="loginjiu">
    <div class="input">
      <input type="text" placeholder="请输入账号" value="">
      <input type="password" placeholder="请输入密码">
      <button @click="loginHandle">登录</button>
    </div>
    <div class="tishi" v-if="isTipsPhone">请输入手机号</div>
    <div class="tishi" v-if="isTipsPass">请输入密码</div>
    <div class="img">
      <img src="../../assets/logo1.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'loginjiu',
  data () {
    return {
      isTipsPhone: false,
      isTipsPass: false
    }
  },
  created () {
    document.title = '登录账号'
  },
  methods: {
    loginHandle () {
      var phone = document.getElementsByTagName('input')[0].value
      var password = document.getElementsByTagName('input')[1].value
      // setTimeout(
      //   () => {
      //     document.getElementsByClassName('tishi')[0].setAttribute('style', 'display: none')
      //     console.log('mmm')
      //     console.log(this)
      //   }, 200)
      if (phone !== '') {
        if (password !== '') {
          if (phone === '4' && password === '4') {
            // 酒店登录
            this.$router.push({name: 'HotelAlliance'})
          } else if (phone === '5' && password === '5') {
            // 加盟商
            this.$router.push({name: 'Replenishment'})
          } else {
            alert('账号、密码错误')
          }
        } else {
          this.isTipsPass = true
          let _this = this
          setTimeout(function () {
            _this.isTipsPass = false
          }, 1000)
        }
      } else {
        this.isTipsPhone = true
        let _this = this
        setTimeout(function () {
          _this.isTipsPhone = false
        }, 1000)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
#loginjiu{
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 4vw 6.66vw 4vw 6.66vw;
  box-sizing: border-box;
  .input{
    width: 86.66vw;
    display: flex;
    flex-direction: column;
    input{
      height: 12.26vw;
      margin-top: 6.66vw;
      padding: 0 3.46vw;
      background:rgba(242,242,242,1);
      border-radius: 0.8vw;
      border: none;
      outline: none;
      font-size: 4.53vw;
      font-family: SourceHanSansCN-Normal;
      font-weight: 400;
      color:rgba(22,22,22,1);
    }
    button{
      height: 12.26vw;
      border: none;
      background:rgba(10,109,255,1);
      border-radius: 0.8vw;
      font-size: 4.53vw;
      font-family:SourceHanSansCN-Normal;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-top: 6.66vw;
      outline: none;
    }
  }
  .tishi{
    height: 10.4vw;
    background:rgba(0,0,0,1);
    border-radius:4px;
    opacity:0.8;
    font-size: 4.26vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
    line-height: 10.4vw;
    margin-top: 13.2vw;
  }
  .img{
    position: fixed;
    bottom: 2.93vw;
    width: 86.66vw;
    text-align: center;
    img{
      width: 35.73vw;
      height: 14.53vw;
    }
  }
}
</style>
